<template>
  <div id="history">
    <Header title="任务列表" />
    <div class="container">
      <van-tabs
        color="#3A73F6"
        @click="tabAction"
        title-active-color="#3A73F6"
        v-model="active"
      >
        <van-tab title="所有任务">
          
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="10"
          >
            <van-cell v-for="(item, index) in list" :key="index">
              <List   route="Details" :item="item" />
            </van-cell>
          </van-list>
        </van-tab>

        <van-tab title="未接单">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="10"
          >
            <van-cell v-for="(item, index) in list" :key="index">
                <List   route="Details" :item="item" />
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="未出车">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="10"
          >
            <van-cell v-for="(item, index) in list" :key="index">
               <List   route="Details" :item="item" />
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="未回车">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :offset="10"
          >
            <van-cell v-for="(item, index) in list" :key="index">
              <List   route="Details" :item="item" />
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import List from "../../components/List";
import Header from "../../components/Header";

export default {
  name: "Handle",
  data() {
    return {
      active: 0,
      tabSelected:0,
      data: {},
      list: [],
      page: 1,
      loading: false,
      isLoading: false,
      finished: false,
      url: "/orderRejoin/queryListRejoinDriver?apply_type=3",
      urls: [
        [ "/orderRejoin/queryListRejoinDriver?apply_type=3"],
        [ "/orderRejoin/queryListRejoinDriver?apply_type=4"],
        [ "/orderRejoin/queryListRejoinDriver?apply_type=5"],
       
      ],
    };
  },
  created() {
    this.getListData();
  },

  methods: {
    //二级菜单选择
    s_tabAction(index){
       this.page = 1;
       this.tabSelected=index
       this.list = [];
       this.url = this.urls[this.active][this.tabSelected];
       this.getListData();
    },
    //一级菜单选择
    tabAction() {
      this.page = 1;
      this.tabSelected=0
      this.list = [];
      this.url = this.urls[this.active][this.tabSelected];
      this.getListData();
    },
   
     //加载更多
    onLoad() {
      if (!this.isLoading) {
        this.getListData();
      }
    },
     //加载列表数据
    getListData() {
      this.$http
        .get(this.url, {
          userId: localStorage.getItem("userId"),
          pageNo: this.page,
          pageSize: 10,
        })
        .then((result) => {
          this.loading = false;
          this.isLoading = false;
          
          this.page = this.page + 1;
          this.data = result.data;
          this.list = this.list.concat(result.data.beans);
          console.log(this.list);
          if (result.data.beans.length < 10) {
            this.finished = true;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  components: {
    List: List,
    Header: Header,
  },
};
</script>

<style scoped>
.container {
  padding: 0;
}
.tab {
  padding: 0 20px;

  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  background: #ffffff;
  height: 87px;
}
.tab-item {
   width: 132px;
  margin-right: 60px;
  position: relative;
  text-align: center;
}
.tab-line {
  width: 132px;
  height: 4px;
  background:#fff;
  border-radius: 2px;
  position: absolute;
  bottom: -30px;
}
.tab-item.active{
  color: rgba(58, 115, 246, 1);
}
.tab-item.active .tab-line{
 background: rgba(58, 115, 246, 1);
}
</style>
